<template>
  <div id="main">
    <layoutHeader v-if="!isIframeEmbed"></layoutHeader>
    <div :class="['container', isIframeEmbed ? 'iframe-embed':'', isIframeOuter ? 'iframe-outer':'']">
      <aside :class="['menu', isCollapse ? 'collapse' : '']" v-if="!isIframeEmbed">
        <layoutMenu></layoutMenu>
      </aside>
      <section :class="['main', isCollapse ? 'collapse' : '']">
        <router-view v-if="!isIframeOuter" :key="$route.meta.key || ''"></router-view>
        <iframe class="iframe-wrap" :src="iframeOuterUrl" v-if="isIframeOuter"></iframe>
      </section>
    </div>
  </div>
</template>

<script>
import header from '../components/layout/header';
import menu from '../components/layout/menu';

export default {
  name: 'ccMain',
  computed: {
    isCollapse() {
      return !!this.$store.state.appLayoutMenuCollapse;
    },
    isIframeEmbed() {
      return this.$store.getters.isIframeEmbed;
    },
    isIframeOuter() {
      return this.$store.state.isIframeOuter;
    },
    iframeOuterUrl() {
      return this.$store.state.iframeOuterUrl;
    }
  },
  components: {
    layoutHeader: header,
    layoutMenu: menu
  },
  mounted() {
    //当涉及到iframe嵌套时, iframe的网页内跳转需要特殊控制; 
    //iframe通过postMessage方式发送消息, 父组件根据消息确定如何跳转
    window.addEventListener('message', (event) => {
      let { origin, data, currentTarget } = event;
      if (origin !== location.origin) {
        if (data.indexOf('location.href:') === 0) {
          location.href = data.replace('location.href:', '');
        } else if (data.indexOf('window.open:') === 0) {
          window.open(data.replace('window.open:', ''));
        }
      }
    }, false);
  }
}
</script>

<style lang="less" scoped>
@import "./main.less";
</style>
